<template>
  <div
    class="card-pool-container"
    v-show="isShow"
    :style="{
      width: infoStore.isMobile ? '340px' : '460px',
      height: infoStore.isMobile ? '280px' : '310px',
      top: infoStore.isMobile ? '250px' : '200px',
      opacity: `${opacity}`,
    }"
    :key="myCards.length"
  >
    <!-- width: infoStore.isMobile ? '330px': '460px', -->
    <!-- top: infoStore.isMobile ? '250px' : '200px', -->
    <div class="card" v-for="(item, i) in cardList" :key="i">
      <el-tooltip
        class="item"
        effect="dark"
        :content="cardStore.cardData[i].effect"
        placement="top-start"
      >
        <CardIcon
          :cardSize="cardSize"
          :place="place"
          :cardId="-1"
          :iconId="item.iconId"
          :color="cardStore.cardData[item.iconId].useNum ? item.color : '#888'"
          :bg="cardStore.cardData[item.iconId].useNum ? item.bg : '#fff'"
          :borColor="colorStore.borColor[0]"
        />
      </el-tooltip>
      <div
        class="content"
        :style="{
          width: cardSize * 1.4 + 'px',
        }"
      >
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
import delay from "@/utils/delay";
import CardIcon from "@/components/CardIcon";
export default {
  components: {
    CardIcon,
  },
  props: {
    myCards: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      place: 2,
      infoStore: this.$store.state.info,
      colorStore: this.$store.state.color,
      cardStore: this.$store.state.cards,
      isShow: false, // 是否显示
      cardSize: this.$store.state.info.isMobile ? 50 : 60, // 卡片尺寸
      opacity: 0, // 卡片池窗口的透明度
      isClick: true, // 卡片池按钮是否可点击 [点击之后是否有效]
      cardData: this.$store.state.cards.cardData, // 卡片数据的列表
    };
  },
  computed: {
    // 卡片的显示数据的列表
    cardList() {
      const arr = [];
      for (let i = 0; i < this.cardData.length; i++) {
        arr.push({ iconId: i, color: "#888", bg: "#f1f1f1", content: "" });
      }
      this.myCards.forEach((item) => {
        arr[item].color = "#333";
        arr[item].bg = this.cardData[item].bg;
        arr[item].content = this.cardData[item].content;
      });
      return arr;
    },
  },
  mounted() {
    // 监听点击卡片池按钮的事件
    this.$bus.$on("clickCardPool", this.handleclickCardPool);
  },
  beforeDestroy() {
    // 移除监听
    this.$bus.$off("clickCardPool", this.handleclickCardPool);
  },
  methods: {
    async handleclickCardPool(isClose = false) {
      if (!this.isClick) {
        return;
      }
      if (this.infoStore.isShowSetting) {
        // 关闭设置
        // this.$store.commit("info/setIsShowSetting", false);
        this.$bus.$emit("clickSetting", false);
      }
      this.isClick = false; // 之后不可点击
      if (this.isShow || isClose) {
        this.opacity = 0;
        await delay(500);
        this.isShow = false; // 隐藏
      } else {
        this.isShow = true; // 显示
        this.opacity = 0;
        await delay(10);
        this.opacity = 1;
      }
      this.isClick = true; // 之后可以点击
    },
  },
};
</script>

<style lang="less" scoped>
.card-pool-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1400;
  border: 3px solid #b7d9ff;
  border-radius: 0 12px 0 12px;
  box-sizing: border-box;
  padding: 20px;
  padding-bottom: 10px;
  background: #fffefb;
  display: grid;
  // grid-template-rows:
  grid-template-columns: repeat(4, 1fr);
  place-items: start center;
  // column-gap: 10px;
  overflow-x: hidden;
  overflow-y: scroll;
  transition: all 0.5s;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15), 8px 6px 8px rgba(0, 0, 0, 0.2);
  .card {
    .card-icon-container {
      margin: 0 auto;
      &:hover {
        transition: all 0.4s;
        transform: scale(1.06);
      }
    }
    .content {
      font-size: 10px;
      margin-top: 5px;
      margin-bottom: 8px;
      padding: 6px;
    }
  }
}
</style>
